<template>
  <div class="activity-form-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span @click="$router.go(-1)"
            ><i style="font-size: 14px" class="iconfont icon-fanhui">
              返回</i
            ></span
          >
          <span style="float: right">发布活动</span>
        </div>
      </template>
      <el-form
        style="height: 500px; width: 600px; margin: 0 auto"
        ref="activityForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input
            v-model="data.title"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="time">
          <el-date-picker
            v-model="data.startTime"
            type="datetime"
            placeholder="选择开始时间"
          ></el-date-picker>
          <span style="margin: 0 10px 0 10px">至</span>
          <el-date-picker
            v-model="data.endTime"
            type="datetime"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-tree-select
            style="width: 240px"
            v-model="data.eventType"
            :data="data.typelist"
            :props="{
              label: 'value',
              value: 'id',
              children: 'dictionarys',
            }"
          >
          </el-tree-select>
        </el-form-item>
        <el-form-item label="活动人数" prop="count">
          <el-input-number v-model="data.count" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="活动地点" prop="location">
          <el-input
            v-model="data.location"
            placeholder="请输入活动地点"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动描述" prop="description">
          <el-input
            type="textarea"
            v-model="data.description"
            placeholder="请输入活动描述"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitActivity">发布活动</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { getDictionaryTreeByDictionaryTypeKey } from "@/api/dictionary";
import { AddActivity } from "@/api/activity";
import { ElMessageBox } from "element-plus";
import { toast } from "@/tools/tools";
import { useRouter } from "vue-router";

const router = useRouter();

const data = reactive({
  title: "",
  startTime: "",
  endTime: "",
  count: 1,
  location: "",
  eventType: "",
  description: "",
  typelist: [],
});

//分布活动
const submitActivity = async () => {
  ElMessageBox.confirm("你确定要发布活动吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await AddActivity({
      ...data,
    });
    if (res.code === 0) {
      toast.success(res.message);
      router.push("/");
    } else {
      toast.error(res.message);
    }
  });
};

//重置表单
const resetForm = () => {
  data.title = "";
  data.endTime = "";
  data.startTime = "";
  data.location = "";
  data.eventType = "";
  data.description = "";
};

const bind = async () => {
  const res = await getDictionaryTreeByDictionaryTypeKey(
    "car_events_categorys"
  );
  if (res.code === 0) {
    data.typelist = res.data;
  }
};

onMounted(() => {
  bind();
});
</script>

<style scoped>
.activity-form-container {
  max-width: 100%;
}

.avatar-uploader {
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}
</style>
